<template>
  <div class="nav-box">
    <!--遍历navlist ,根据下标,给不同背景see  -->
    <div @click="clicknav(item.val,index)" v-for="(item,index) in navList" :key="index" :style="{backgroundColor:(currentIndex==index?'#2a2f33':item.bgc)}">
       <!-- 渲染不同文本  处理中,待处理 邓 -->
      <span>{{item.text}}</span>
     <!-- 渲染不同数量和颜色 -->
      <span :style="{color:item.col}">{{item.num}}</span>
    </div>

 </div>
</template> 
<script setup>
import './nav.scss'
import {ref,onMounted} from 'vue'
import emitt from '@/utils/eventBus';
import db from "@/data/db.js"

// 定义数据
const navList = ref([
  {
    text:'待处理',
    num:'7',
    col:"skyblue",
    val:"pending",
    bgc:'#1f232c'
  },
  {
    text:'处理中',
    num:'5',
    col:'pink',
    val:"processing",
    bgc:'#1f232c'
  },
  {
    text:'已解决',
    num:'8',
    col:'green',
    val:"resolved",
    bgc:'#1f232c'
  } 
])

// 点击事件的下标
let currentIndex = ref(0);

// 传递数据给兄弟组件
const clicknav=(val,idx)=>{
  currentIndex.value = idx;
  emitt.emit('changeState',val);
}

// 初始化数据
const inidata=()=>{
  navList.value.forEach(stateItem=>{
    // console.log(stateItem);
    stateItem.num = db.filter(item=>item.state===stateItem.val).length
    // console.log(stateItem.num);
  })
}
// 更新时,重新初始化数据
onMounted(() => {
  inidata();
})

</script>


